<template>
  <div class="playlostsinfo">
    <!-- 顶部 -->
    <div class="topinfo">
      <div class="image">
        <img :src="topinfo.coverImgUrl" >
      </div>
      <div class="content">
        <div class="boutique">精品歌单</div>
        <p class="titlename">{{topinfo.name}}</p>
        <p class="description">{{topinfo.description}}</p>
      </div>
    </div>
    <!-- 标签 -->
    <div class="tagall">
      <span 
      v-for="(item,index) in tabcontent" 
      :key="index"
      @click="active(index)"
      :class="{actived:(index == currtindex)} ">{{item}}</span>
    </div >
    <!-- 音乐列表 -->
    <div class="musiclist">
    <div v-for="(item) in playlists" :key="item.id" class="iteminfo" >
      <div>
        <img class="imagelist" :src='item.coverImgUrl' @click="deatils(item.id)">
      </div>
      <div class="conetnt">
        <p class="description">{{item.description}}</p>
      </div>
    </div>
    </div>
    <!-- 分页 -->
      <el-pagination
      @current-change="handleCurrentChange"
      background
      :page-size="5"
      layout="prev, pager, next"
      :total='1000'>
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'palylists',
    data () {
      return {
        topinfo:{},
        tabcontent:['全部','欧美','华语','流行','说唱','摇滚','民谣','电子','轻音乐','影视原型','ACG','怀旧','治愈','旅行'],
        currtindex:0,
        offset:0,
        playlists:[]
      }
    },
    created () {
      this.getplaylist()
      this.hotplaylist()
    },
    methods: {
      async getplaylist(){
        const res =await this.$http.get('top/playlist/highquality',{params:{
          limit:1
        }})
        // console.log(res)
        this.topinfo  = res.data.playlists[0]
      },
     async  active(index){
        this.currtindex=index
          const res =await this.$http.get('top/playlist',{params:{
          limit:10,
          offset:this.offset,
          cat:this.tabcontent[index]
        }})
        this.playlists =res.data.playlists
      },
     async hotplaylist(){
          const res =await this.$http.get('top/playlist',{params:{
          limit:10,
          offset:this.offset,
          cat:'全部'
        }})
        console.log(res)
        this.playlists =res.data.playlists
    },
    handleCurrentChange(){
      this.offset +=15
      this.hotplaylist()
    },
    deatils(id){
      console.log(1)
      this.$router.push(`/playlist?id=${id}`)
    }
    }
  }
</script>

<style lang="less" scoped>
 .playlostsinfo{
   margin: 80px 0 0 350px;
   .topinfo{
     overflow: hidden;
     border-radius: 10px;
     width: 1050px;
     height: 200px;
     display: flex;
     padding: 10px 0;
     background: url('~assets/img/bg.jpg');
     .image{
       img{
         width: 200px;
         height:200px
       }
     }
     .content{
       text-overflow: ellipsis;
       margin-left: 20px;
       line-height: 20px;
       .boutique{
         border-radius: 5px;
         margin-bottom: 5px;
         font-weight: 900px;
         padding: 5px;
         text-indent: 0.5em;
         width: 80px;
         color: burlywood;
         border: 1px solid burlywood;

       }
        .titlename{
       color: #fff;
       font-size: 18px;
     }
     .description{
       text-indent:2em;
       line-height: 25px;
     }
     }
    
    
   }
   .tagall{
     margin:30px 0 0 300px ;
     span{
       font-size: 18px;
       margin-left: 10px;
     }
   }
   .actived{
     color: red;
   }
    .musiclist{
      display: flex;
      flex-wrap: wrap;
       .iteminfo{
         margin: 20px 0 10px 10px;
         overflow: hidden;
         width: 200px;
         height: 245px;
         .imagelist{
            
          border-radius: 10px;
          width: 200px;
          height: 200px;
           
         }
         .conetnt{
         margin-top: 5px;
         width: 200px;
         text-indent: 1em;
         
         .description{
          overflow: hidden;
          text-overflow: ellipsis;
         }
         }
       }
     }
     .el-pagination{
       margin: 20px 0 80px 200px;
     }
 }
</style>